<%@ page import="com.njts.bean.User" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/5/24
  Time: 16:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<% List<User> userList = (List<User>) request.getAttribute("userList");%>
<%
    String[] titles=new String[]{"账号","密码","使用者","权限"};
    String[] names=new String[]{"name","password","personName","type"};
    String[] placeholder=new String[]{
            "请输入账号",
            "请输入密码",
            "请输入使用者id",
            "请输入权限"
    };
%>
<span style="display: inline-block; font-size: 20px;">功能区</span>
<div class="input-group">
    <%  for(int i=0; i< names.length;i++){%>

    <div class="input-group-addon"><%= titles[i]%></div>

    <input type="text" name="<%=names[i]%>" id="input<%=names[i]%>" class="form-control" value="" required="required" pattern="" title="" placeholder="<%=placeholder[i]%>">
    <% }%>
</div>
<div style="display: flex;justify-content: end">

    <div class="input-group-addon" style="width:52px; line-height: 20px">id</div>
    <input type="text" name="id" id="inputid" class="form-control" value="" required="required" pattern="" title="" placeholder="请输入要修改的id" style="width: 250px">
    <button type="button" class="btn btn-success userUpdateButton">修改</button>
    <button type="button" class="btn btn-primary userAddButton">增加</button>
    <button type="button" class="btn btn-warning userSelectButton">搜索</button>
</div>


<table class="table table-bordered table-hover">
    <thead>
    <tr>
        <th>id</th>
        <% for(int i=0;i<titles.length;i++){%>
        <th><%=titles[i]%></th>
        <%}%>
        <th>操作</th>
    </tr>
    </thead>
    <tbody class="userTable-tbody">
    <% for(User user : userList ){ %>
    <tr>
        <td class="id"><%= user.getId() %></td>

        <td><%= user.getName()%></td>

        <td><%= user.getPassWord()%></td>

        <td><%= user.getPersonId()%></td>

        <td><%= user.getType()%></td>

        <td>
            <button type="button" class="btn btn-danger deleteButton">删除</button>
        </td>
    </tr>
    <%}%>
    </tbody>
</table>
<div style="display: flex;justify-content: end;">
    <%
        int userCount= (int) request.getAttribute("userCount");
        int everyPageCount= 8;
        int pageCount= userCount%everyPageCount==0? userCount/everyPageCount: userCount/everyPageCount+1;
    %>
    <ul class="pagination">
        <li><a href="#">&laquo;</a></li>
        <% for(int i=1;i<=pageCount;i++){%>
        <li><a href="#"><%= i%></a></li>
        <%}%>
        <li><a href="#">&raquo;</a></li>
    </ul>
</div>
<script>
    function globalRefresh(response){
        var pattern=/<body>(\s|\S)*<\/body>/
        var data=response.toString();
        var html=pattern.exec(data)[0].replace(/<body>|<\/body>/,"").replace(/\s\\r\s/g,"").replaceAll(/\s\\n\s/g,"");
        $(".main-body").html(html);
    }
    function userDelete(id,tr) {
        $.ajax({
            type: "post",
            url: "/userDeleteById",
            data: {
                id
            },
            success: function (response) {
                console.log(response)
                if (response == "200") {
                    console.log("数据库删除成功");
                    $(tr).remove()
                    return true;
                } else {
                    console.log("数据库删除失败");
                    return false;
                }
            }
        });
    }
    function userAdd(user){
        $.ajax({
            type: "post",
            url: "/userAdd",
            data: user,
            success: function (response) {
                globalRefresh(response);
            }
        });
    }
    function userUpdate(user){
        $.ajax({
            type: "post",
            url: "/userUpdate",
            data: user,
            success: function (response) {
                globalRefresh(response);
            }
        });
    }
    function userSelect(user){
        $.ajax({
            type: "post",
            url: "/userSelect",
            data: user,
            success: function (response) {
                globalRefresh(response);
            }
        });
    }
    function getuser(){
        var id=$("#inputid").val();
        var name=$("#inputname").val();
        var passWord=$("#inputpassword").val();
        var personId=$("#inputpersonId").val();
        var type=$("#inputtype").val();
        var user={
            id,name,passWord,personId,type
        }
        return user
    }
    $(function () {
        $(".userTable-tbody tr .deleteButton").on("click", function (e) {
            var tr=e.target.parentNode.parentNode;
            var id=$(tr.querySelector(".id")).text().trim();
            userDelete(id,tr)
        });
        $(".userAddButton").on("click",function(e){
            var user=getuser();
            console.log(user)
            userAdd(user);
        })
        $(".userUpdateButton").on("click",function (e){
            var user=getuser();
            userUpdate(user);
        })
        $(".userSelectButton").on("click",function (e){
            var user=getuser();
            userSelect(user);
        })
    })
</script>
</body>
</html>
